<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="__PUBLIC__/Appindex/css/index.css">
    <script src="//cdn.bootcss.com/vue/2.2.1/vue.min.js"></script>
    <script src="__PUBLIC__/Appindex/js/Sortable.js"></script>
    <script src="__PUBLIC__/Appindex/js/vuedraggable.js"></script>
    <script src="//cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js"></script>
    <script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<!--     <script src="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script> -->
</head>
<body>
<!--<div class="sidebar">
    <div class="title">控件选择</div>
    <ul class="types">
        <li id="" v-for="type of types">
            <i :class="type.class"></i>
            <span>{{type.name}}</span>
        </li>
    </ul>
</div>-->
<div class="main">
    <div class="wrap">
        <div class="mobile">
            <div class="header"></div>
            <div class="content">
                <div v-for="(content,cnum) of contents">
                    <div class="c-title" :class="content.class"></div>
                    <ul class="sortitem" :data-value="cnum" :tid="content.tid">
                        <!-- <li class="items" :id="index" :aid="item.aid" v-for="(item,index) of content.items" v-if="index+1<=content.limits">
                            <div class="img">
                                <img :src="item.img" alt="">
                            </div>
                            <div class="close" v-if="isEdit" @click="reback(item,cnum)">
                                <img src="__PUBLIC__/Appindex/img/close.png" alt="">
                            </div>
                            <div class="text">{{item.text}}</div>
                        </li> -->
                        <draggable :list="content.items"
                        :options="{'disabled':!isEdit}"
                        >
                             <li class="items"
                                 :id="index"
                                 :data-aid="item.aid"
                                 v-for="(item,index) of content.items"
                                 v-if="index+1<=content.limits">
                                 <div class="img">
                                     <img :src="item.img" alt="">
                                 </div>
                                 <div class="close"
                                      v-if="isEdit"
                                      @click="reback(item,cnum)"
                                 >
                                     <img src="__PUBLIC__/Appindex/img/close.png" alt="">
                                 </div>
                                 <div class="text">{{item.text}}</div>
                             </li>
                         </draggable>
                    </ul>
                    <div class="items add"
                         @click="click(content)"
                         v-if="content.items.length < content.limits && isEdit">
                        <div class="img">
                            <img src="__PUBLIC__/Appindex/img/add.png" alt="">
                        </div>
                        <div class="text">添加新的内容</div>
                    </div>
                    <div class="clr"></div>
                </div>
            </div>
            <div class="footer"></div>
            <div class="control">
                <button class="btn edit" v-if="!content.isEdit" @click="onEdit()">编辑</button>
                <button class="btn cancel" v-if="content.isEdit" @click="onCancel()">取消</button>
                <button class="btn save" @click="save()">保存</button>
            </div>
        </div>
    </div>
</div>
<div class="list">
    <div class="header">
        <div class="info">{{title}}</div>
        <div class="search">
            <input id="search" type="text" placeholder="搜索栏目">
            <div class="search-icon"><i></i></div>
        </div>
    </div>
    <ul>
        <li class="items"
            @click="show(index)"
            v-for="(item,index) of items">
            <div class="img">
                <img :src="item.img" width="100%" height="100%" alt="">
            </div>
            <div class="info">{{item.text}}</div>
            <div class="controls" v-bind:class="{active: isShow[index]}">
                <button class="btn add"  v-on:click.stop.prevent="add(item)"
                >添加
                </button>
                <button class="btn cancel" v-on:click.stop.prevent="cancel(index)"
                >取消
                </button>
            </div>
        </li>
    </ul>
    <div class="pager">
        <ul v-if="showpager">
            <li v-bind:class="{ disable: pagerObj.currentPage === 1 }">
                <a @click="setPage(1)"><i class="fa fa-angle-double-left" aria-hidden="true"></i></a>
            </li>
            <li v-bind:class="{ disable: pagerObj.currentPage === 1 }">
                <a @click="setPage(pagerObj.currentPage - 1)"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
            </li>
            <li v-for="page of pagerObj.pages">
                <a v-bind:class="{ active: pagerObj.currentPage === page}" @click="setPage(page)">{{page}}</a>
            </li>
            <li v-bind:class="{ disable: pagerObj.currentPage === pagerObj.totalPages }">
                <a @click="setPage(pagerObj.currentPage + 1)"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
            </li>
            <li v-bind:class="{ disable: pagerObj.currentPage === pagerObj.totalPages }">
                <a @click="setPage(pagerObj.totalPages)"><i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
            </li>
        </ul>
    </div>
</div>

<script>
    var typesData = [
        <volist name='cate' id='v'>
        {class: "{$v.class}", name: "{$v.name}",page:1, data: [], items: [<volist name='v["item"]' id='item'>
            {text: "{$item.text}", img: "{$item.img}",aid:{$item.aid}},
            </volist>], limits: {$v.limits},tid:{$v.tid}},
        </volist>
    ];
</script>
<script src="__PUBLIC__/Appindex/js/index.js"></script>
</body>
</html>